<template>
<div style="mthb">
  <var-app-bar title="美团红包" title-position="center" color="#fff" text-color="black">
      <template #left>
        <var-button
          round
          text
          color="transparent"
          text-color="black"
          @click="goBack"
        >
          <var-icon name="chevron-left" :size="24" />
        </var-button>
      </template>
  </var-app-bar>

  <div style="padding-bottom:50px;">
    <div style="background:#ffffff;height:700px;border-radius:0 0 20px 20px;position: relative;z-index: 2;">
  
      <div style="margin-top:10px;width: 96%;margin-left: 2%;">
      <var-swipe class="swipe-example" :autoplay="2000" style="border-radius:20px;">
        <var-swipe-item>
          <img class="swipe-example-image" src="https://img0.baidu.com/it/u=3547270146,831455294&fm=253&fmt=auto&app=138&f=PNG?w=980&h=500
    ">
        </var-swipe-item>
        <var-swipe-item>
          <img class="swipe-example-image" src="https://img0.baidu.com/it/u=2466994309,660034896&fm=253&fmt=auto&app=138&f=PNG?w=900&h=383
    ">
        </var-swipe-item>
      </var-swipe>
      </div>

      <div style="width:96%;height:180px;border-radius: 20px;background:#ffefbb;position: relative;left:2%; margin-top:10px;">
        <div style="background:#ffd400;width:40%;height:25px;position: absolute;top:0px;left:0px;border-radius: 20px 0px 20px 0px;">
          <div style="width:40%;height:100%;float:left;border-radius:20px 0px 20px 0px;background:#ffba00;"></div>
          <div style="font-size:12px;line-height:25px;text-algin:center;"><b>美团会员红包</b></div>
        </div>
        <div style="height:50%;border-bottom:1px dashed #f2d59c;width:90%;position: absolute;top:30px;left:5%;">
          <div style="float:left;margin-top:20px;">
            <span><b>美团会员红包</b></span><br>
            <span style="font-size:12px;color:#817f73;">有效期至2022.07.12</span>
          </div>
          <div style="float:right;margin-top:5px;font-size:14px;color:red;">
            <span style="margin-left:5px;">￥<b style="font-size:28px;">5</b></span><br>
            <span>无门槛</span>
          </div>
        </div>
        <div style="border:1px; solid yellow;width:90%;position: absolute;top:140px;left:5%;">
          <div style="color:#b0aa96;font-size:14px;flat:eft;width:50%;" >
            <span>单次可用1张。</span>
            <var-icon name="chevron-down"/> 
          </div>
          <div style="float:right;margin-top:-25px;">
            <var-button color="linear-gradient(to right, #FF8000, #ff2255)" text-color="#fff" size="small">去使用</var-button>
          </div>
        </div>
      </div>

      <div style="width:96%;height:180px;border-radius: 20px;background:#ffefbb;position: relative;left:2%; margin-top:10px;">

        <div style="background:#ffd400;width:40%;height:25px;position: absolute;top:0px;left:0px;border-radius: 20px 0px 20px 0px;">
          <div style="width:40%;height:100%;float:left;border-radius:20px 0px 20px 0px;background:#ffba00;"></div>
          <div style="font-size:12px;line-height:25px;text-algin:center;"><b>美团会员红包</b></div>
        </div>

        <div style="height:50%;border-bottom:1px dashed #f2d59c;width:90%;position: absolute;top:30px;left:5%;">
          <div style="float:left;margin-top:20px;">
            <span><b>美团会员红包</b></span><br>
            <span style="font-size:12px;color:#817f73;">有效期至2022.07.12</span>
          </div>
          <div style="float:right;margin-top:5px;font-size:14px;color:red;">
            <span style="margin-left:5px;">￥<b style="font-size:28px;">5</b></span><br>
            <span>无门槛</span>
          </div>
        </div>
        <div style="border:1px; solid yellow;width:90%;position: absolute;top:140px;left:5%;">
          <div style="color:#b0aa96;font-size:14px;flat:eft;width:50%;" >
            <span>单次可用1张。</span>
            <var-icon name="chevron-down"/> 
          </div>
          <div style="float:right;margin-top:-25px;">
            <var-button color="linear-gradient(to right, #FF8000, #ff2255)" text-color="#fff" size="small">去使用</var-button>
          </div>
        </div>
      </div>

      <span style="position: absolute;bottom: 0px;text-align: center;width: 100%;font-size: 14px;">点击收起<var-icon name="chevron-up" /></span>
    </div>

    <div style="background:#f4f4f4;position: relative;top: -10px;padding-top: 10px;padding-bottom:50px;">

      <div style="width:90%;height:150px;border-radius: 20px;background:#ffffff;position: relative;margin-top:20px;left:5%;" v-for="item in 5">
        <div style="height:50%;border-bottom:1px dashed #eaeaea;width:90%;position: absolute;top:10px;left:5%;">
          <div style="float:left;margin-top:20px;">
            <span><b>超市新客专享红包</b></span><br>
            <div style="font-size:12px;color:red;backgrond:#ffece8;margin-top:5px;">今日到期</div>
          </div>
          <div style="float:right;margin-top:5px;font-size:14px;color:red;text-align: center;">
            <span>￥<b style="font-size:28px;">12</b></span><br>
            <span>满18可用</span>
          </div>
        </div>

        <div style="border:1px; solid yellow;width:90%;position: absolute;top:110px;left:5%;">
          <div style="color:#b0aa96;font-size:14px;flat:left;width:70%;" >
            <span style="display: block; width:180px;overflow:hidden;white-space: nowrap;text-overflow: ellipsis;float:left;font-size: 12px;">闪购新客专享：仅限本账户首次在闪购(非楼上那个老师那里呢)</span>
            <var-icon name="chevron-down" style="float:right;"/> 
          </div>
          <div style="float:right;position: absolute;right:0px;margin-top:-5px;">
            <var-button color="linear-gradient(to right, #FF8000, #ff2255)" text-color="#fff" size="small">去使用</var-button>
          </div>
        </div>
      </div>

      <div style="width:90%;height:150px;border-radius: 20px;background:#ffffff;position: relative;margin-top:20px;left:5%;" v-for="item in 3">
        <div style="height:50%;border-bottom:1px dashed #eaeaea;width:90%;position: absolute;top:10px;left:5%;">
          <div style="float:left;margin-top:20px;">
            <span><b>超市新客专享红包</b></span><br>
            <div style="font-size:12px;color:red;backgrond:#ffece8;margin-top:5px;">今日到期</div>
          </div>
          <div style="float:right;margin-top:5px;font-size:14px;color:red;text-align: center;">
            <span>￥<b style="font-size:28px;">12</b></span><br>
            <span>满18可用</span>
          </div>
        </div>
        <div style="border:1px; solid yellow;width:90%;position: absolute;top:110px;left:5%;">
          <div style="color:#b0aa96;font-size:14px;flat:left;width:70%;" >
            <span style="display: block; width:180px;overflow:hidden;white-space: nowrap;text-overflow: ellipsis;float:left;font-size: 12px;">闪购新客专享：仅限本账户首次在闪购(非楼上那个老师那里呢)</span>
            <var-icon name="chevron-down" style="float:right;"/> 
          </div>
          <div style="float:right;position: absolute;right:0px;margin-top:-5px;">
            <var-button color="linear-gradient(to right, #FF8000, #ff2255)" text-color="#fff" size="small">去使用</var-button>
          </div>
        </div>
      </div>

    </div>

  </div>

</div>
</template>
<script lang="ts" setup>
import { Snackbar } from '@varlet/ui'
import router from '../../router'
const goBack = () => {
    router.push('/wode')
  Snackbar({
    // content: '返回',
    position: 'top'
  })
}
</script>
<style lang="scss" scoped>

.var-elevation--3{
  box-shadow: none !important;
}
    .swipe-example {
        height: 160px;
    }

    .swipe-example-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        pointer-events: none;
    }
    .mthb{
        background:#999;
    }
</style>